import React from 'react';
import {withRouter} from 'react-router-dom';
import {Button, Icon, Badge, Modal, Input} from 'antd';
import {connect} from 'react-redux';
import action from '../../store/actions/socketMsgs';
import {clearCache, getSocketCount, editPassword} from '../../api/';
import './Head.scss';

class SimpleTabs extends React.Component {
  state = {
    visible: false,
    confirmLoading: false,
    password: '',
    new_password: ''
  };

  // 退出登录
  cancellation = () => {
    localStorage.clear();
    this.props.history.replace('/login');
  };

  // 修改密码
  editPassword() {
    this.setState({
      visible: true
    });
  }

  handleOk = () => {
    this.setState({
      confirmLoading: true
    });
    const {password, new_password} = this.state;
    if (password && new_password) {
      editPassword(password, new_password).then(res => {
        this.cancellation();
        this.setState({
          visible: false,
          confirmLoading: false
        });

      });
    }
  }
  ;

  handleCancel = () => {
    console.log('Clicked cancel button');
    this.setState({
      visible: false
    });
  };

  // 清除缓存
  clearCache() {
    clearCache().then(res => {
      console.log(res);
      window.location.reload();
    }).catch(err => {
      console.log(err);
    });
  }

  componentDidMount() {
    getSocketCount().then(res => {
      console.log(res);
      localStorage.setItem('waitingCount', res.data);
    }).catch(err => {
      console.log(err);
    });
  }

  render() {
    const {visible, confirmLoading} = this.state;
    return (
      <div className='myHeader'>
        <ul className='nav-box'>
          <li className='nav-box__logo'>
            <img className='logo' src={require('../../imgs/logo/logo.png')} alt={'logo加载失败'}/>
            <h3>{localStorage.getItem('username')}</h3>
          </li>
          <li className='nav-box__title'>库存管理系统</li>
          <li className='nav-box__login'>
            <Badge count={this.props.waitingCount || localStorage.getItem('waitingCount')}>
              <Icon type="alert" style={{fontSize: '28px'}}/>
            </Badge>
            <Button icon="redo" onClick={this.clearCache.bind(this)}>清除缓存</Button>
            <Button icon="smile-o" onClick={this.editPassword.bind(this)}>修改密码</Button>
            <Button icon="smile-o" onClick={this.cancellation}>退出登录</Button>
          </li>
        </ul>
        <Modal
          title="修改密码"
          visible={visible}
          onOk={this.handleOk}
          confirmLoading={confirmLoading}
          onCancel={this.handleCancel}
        >
          <div>
            <Input.Password
              onChange={(e) => this.setState({password: e.target.value})}
              placeholder="请输入旧密码"
              style={{marginBottom: '20px'}}
            />
            <Input.Password
              onChange={(e) => this.setState({new_password: e.target.value})}
              style={{marginBottom: '20px'}}
              placeholder="请输入新密码"/>
          </div>
        </Modal>
      </div>
    );
  }
}

const mapStateToProps = state => state.socketMsgs;
export default connect(mapStateToProps, action)(withRouter(SimpleTabs));
